@import './commonM/_crumbs.less';
@import './commonM/_favoriteNav.less';
@import './commonPC/_search.less';
@import './commonM/_productBox.less';

.content.mt120{
    margin-top: 44px;
}
.home-box{
    margin: 40px auto 0;
    
}
.img-text{
    border-bottom: 1px solid #E4E4E4;
    &:last-child{
        border-bottom: none;
    }
} 
#infscr-loading {
    bottom: -10px;
    left: 50%;
    position: absolute;
    text-align: center;
    height: 20px;
    line-height: 20px;
    z-index: 100;
    width: 60px;
    margin-left: -30px;
    img{
        width: 60px;
        display: inline-block;
    }
  }

/*左右布局*/
.column{
    padding-bottom: 150px;
}
.column-right{
    width: 100%;
}

.page-title{
    line-height: 64px;
    font-size: 24px;
    font-family: Roboto-Bold;
    font-weight: bold;
    color: #121212;
    letter-spacing: 1px;
}
.column-right{
	.products-content{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .products-box{
            padding: 0 0 15px;
            width: 154px;
            .products-box-img{
                width: 154px;
                height: 154px;
                img{
                    width: 154px;
                    height: 154px;
                }
            }
        }
    }
}

.products-content{
    margin-top: 24px;
}
/*---分类a---*/
.list-a{
    line-height: 20px;
    overflow: hidden;
    li{
        height: 64px;
        display: flex;
        align-items: center;
        p{
            font-size: 16px;
            font-family: Roboto-Regular;
            font-weight: 400;
            color: #121212;
            line-height: 20px;
            display: block;
            span{
                color: #999;
            } 
            a{
                display: inline-block;
            }
        }
        a{
            font-size: 16px;
            font-family: Roboto-Regular;
            font-weight: 400;
            color: #121212;
            line-height: 20px;
            display: block;
            span{
                color: #999;
            }
        }
    }
    
}
/*---分类b---*/
.list-b{
    line-height: 20px;
    overflow: hidden;
    li{
        height: 64px;
        display: flex;
        align-items: center;
        a{
            font-size: 16px;
            font-family: Roboto-Regular;
            font-weight: 400;
            color: #121212;
            line-height: 20px;
            display: block;
            width: 100%;
            // background: url(../images/foryou/ic_right@2x.png) no-repeat center right/8px auto;
            // padding-right: 15px;
            overflow: hidden;
        }
        &:first-child{
            a{
                color:#000;
                background: none;
            }
        }
    }
    
}
/*---slider list title---*/
.product-title{ 
    line-height: 64px;
    height: 64px;
    overflow: hidden;
    span{
        font-size: 16px;
        font-family: Roboto-Bold;
        font-weight: bold;
        color: #333333;
        padding-left: 30px;
        box-sizing: border-box;
        display: block;
    }
    span.price{
        background: url(../images/foryou/price@2x.png) no-repeat center left/21px auto;
    }
    span.brand{
        background: url(../images/foryou/brand@2x.png) no-repeat center left/21px auto;
    }
    span.store{
        background: url(../images/foryou/business@2x.png) no-repeat center left/21px auto;
    }
    span.about{
        background: url(../images/foryou/aboutus@2x.png) no-repeat center left/21px auto;
    }
}

/*price-box*/
.price-box{
    height: 64px;
    padding: 12px 0 16px 16px;
    box-sizing: border-box;
    overflow: hidden;
    span{
        font-size: 14px;
        font-family: Roboto-Regular;
        font-weight: 400;
        color: #999999;
        display: inline-block;
        line-height: 40px;
    }
    input{
        width: 60px;
        height: 40px;
        background: #FFFFFF;
        border-radius: 10px;
        border: 1px solid #DCDCDC;
        line-height: 40px;
        padding: 8px;
        box-sizing: border-box;
        overflow: hidden;
        margin: 0 12px;
    }
    button{
        width: 40px;
        height: 40px;
        background: #FFFFFF;
        border-radius: 10px;
        border: 1px solid #177FE9;
        font-size: 14px;
        font-family: Roboto-Medium;
        font-weight: 500;
        color: #177FE9;
        cursor: pointer;
    }
}

/*--checkbox-list----*/
.checkbox-list{
    li{
        line-height: 64px;
        padding-left: 30px;
        box-sizing: border-box;
        position: relative;
        p{
            display: inline-block;
            font-size: 16px;
            font-family: Roboto-Regular;
            font-weight: 400;
            color: #333333;
            margin-left: 16px;
            &:first-child{
                margin: 0;
            }
            span{
                margin-left: 16px;
                color: #999999;
            }
            input{
                visibility:hidden;
            }
            label{
                font-size: 16px;
                font-family: Roboto-Regular;
                font-weight: 400;
                color: #333333;
                margin-left: 16px;
                cursor:pointer;
                position:absolute;
                width:16px;
                height:16px;
                top:23px;
                left:18px;
                background:#fff;
                border:1px solid #DCDCDC;
                &::after{
                    opacity:0;
                    content:'';
                    position:absolute;
                    width:16px;
                    height:16px;
                    top:-1px;
                    left:-1px;
                    background: url(../images/foryou/Sidebar_Checkbox_Selected@2x.png) no-repeat center center/16px auto;
                   
                }
            }
        }
    }
}
.checkbox-list li input[type=checkbox]:checked + label {
	background:#fff;
	border:1px solid #fff;
}
.checkbox-list li input[type=checkbox]:checked + label:after {
	opacity:1;
}

/*--search-button---*/
.search-button-slider{
    width: 268px;
    height: 40px;
    background: #FFFFFF;
    border-radius: 32px;
    border: 1px solid #177FE9;
    margin:12px 0 12px 15px;
    cursor: pointer;
    font-size: 14px;
    font-family: Roboto-Medium;
    font-weight: 500;
    color: #177FE9;
}
/*-----*/
.search-mobile{
    display: flex;
    .search-mobile-box{
        width: 124px;
        position: relative;
        margin-right: 16px;
        .search-mobile-box-button{
            height: 32px;
            line-height: 30px;
            background: #FFFFFF;
            border-radius: 22px;
            border: 1px solid #DCDCDC;
            box-sizing: border-box;
            padding:0 10px;
            display: flex;
            justify-content: space-between;
            cursor: pointer;
            div{
                width: 80px;
                overflow: hidden;
                line-height: 30px;
                display: grid;
                p{
                    font-size: 12px;
                    font-family: Roboto-Regular;
                    font-weight: 400;
                    color: #333;
                    display: inline-block;
                    width: 200px;
                    line-height: 30px;
                }  
            }
            em{
                width: 12px;
                height: 30px;
                display: block;
                background: url(../images/product/mobile/Triangle-down@3x.png) no-repeat center center/12px auto;
            }
        }
        .search-mobile-box-button.hov{
            border-radius:22px 22px 0 0;
            em{
                background: url(../images/product/mobile/Triangle-up@3x.png) no-repeat center center/12px auto;
            }
        }
        .search-mobile-box-list{
            position: absolute;
            width: 124px;
            border-radius:0 0 22px 22px;
            border: 1px solid #DCDCDC;
            border-top: none;
            box-sizing: border-box;
            top: 26px;
            left: 0;
            z-index: 2;
            background: #fff;
            padding-bottom: 6px;
            li{
                height: 20px;
                overflow: hidden;
                line-height: 20px;
                padding:0 10px;
                box-sizing: border-box;
                font-size: 12px;
                font-family: Roboto-Regular;
                font-weight: 400;
                color: #121212;
                cursor: pointer;
                margin-top: 12px;
            }
        }
    }
    .filter{
        display: inline-block;
        padding-right: 16px;
        height: 32px;
        font-size: 12px;
        font-family: Roboto-Regular;
        font-weight: 400;
        color: #333333;
        line-height: 32px;
        background: url(../images/product/mobile/icon2@3x.png) no-repeat right center/12px auto;
    }
}
.nav-shadow{
    background: rgba(0, 0, 0, 0.6);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 44px;
    left: 0;
    z-index: 2;
    &.hide{
        display: none;
    }
}
.nav-shadow{
    .close{
        width: 14px;
        height: 14px;
        position: absolute;
        right: 24px;
        top: 15px;
        background: url(../images/navigation/mobile/close@3x.png) no-repeat center right/14px auto;
    }
}
.filter-box{
    background: #fff;
    padding: 0 24px 60px;
    max-height: 100%;
    overflow-y: scroll;
    position:relative;
    h2{
        font-size: 15px;
        font-family: Roboto-Medium;
        font-weight: 500;
        color: #121212;
        line-height: 44px;
    }
    h3{
        font-size: 15px;
        font-family: Roboto-Medium;
        font-weight: 500;
        color: #333333;
        line-height: 44px;
        border-top: 1px solid #E4E4E4;
        display: flex;
        justify-content: space-between;
        span{
            width: 15px;
            height: 44px;
            display: inline-block;
            background: url(../images/product/mobile/down@3x.png) no-repeat right center/15px auto;
        }
        &.hov span{
            background: url(../images/product/mobile/up@3x.png) no-repeat right center/15px auto;
        }
    }
    .filter-check-list{
        li{
            line-height: 44px;
            font-size: 14px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            color: #333333;
            height: 44px;
            overflow: hidden;
        }
    }
    .filter-price-box{
        font-size: 14px;
        font-family: Roboto-Medium;
        font-weight: 500;
        color: #333333;
        line-height: 36px;
        margin: 10px 0 16px;
        overflow: hidden;
        height: 36px;
        input{
            width: 75px;
            height: 36px;
            line-height: 34px;
            text-align: center;
            box-sizing: border-box;
            background: #FFFFFF;
            border-radius: 6px;
            border: 1px solid #E4E4E4;
            font-size: 14px;
            font-family: Roboto-Regular;
            font-weight: 400;
            color: #999999;
            margin: 0 16px;
        }
        button{
            width: 75px;
            height: 36px;
            line-height: 34px;
            text-align: center;
            background: #FFFFFF;
            border-radius: 6px;
            border: 1px solid #177FE9;
            box-sizing: border-box;
            font-size: 14px;
            font-family: Roboto-Regular;
            font-weight: 400;
            color: #177FE9;
            float: right;
        }
    }
    .filter-checkbox-list{
        li{
            line-height: 44px;
            box-sizing: border-box;
            position: relative;
            p{
                display: inline-block;
                font-size: 16px;
                font-family: Roboto-Regular;
                font-weight: 400;
                color: #333333;
                margin-left: 20px;
                &:first-child{
                    margin: 0;
                }
                span{
                    margin-left: 14px;
                    color: #999999;
                }
                input{
                    visibility:hidden;
                }
                label{
                    font-size: 14px;
                    font-family: Roboto-Regular;
                    font-weight: 400;
                    color: #333333;
                    cursor:pointer;
                    position:absolute;
                    width:14px;
                    height:14px;
                    top:15px;
                    left:0;
                    background:#fff;
                    border:1px solid #DCDCDC;
                    &::after{
                        opacity:0;
                        content:'';
                        position:absolute;
                        width:14px;
                        height:14px;
                        top:-1px;
                        left:-1px;
                        background: url(../images/foryou/Sidebar_Checkbox_Selected@2x.png) no-repeat center center/14px auto;
                       
                    }
                }
            }
        }
    }
    .filter-checkbox-list li input[type=checkbox]:checked + label {
        background:#fff;
        border:1px solid #fff;
    }
    .filter-checkbox-list input[type=checkbox]:checked + label:after {
        opacity:1;
    }
    .filter-search-button-slider{
        width: 327px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background: #FFFFFF;
        border-radius: 20px;
        border: 1px solid #177FE9;
        font-size: 14px;
        font-family: Roboto-Regular;
        font-weight: 400;
        color: #177FE9;
        margin: 16px 0;
    }
}
.filter-pop-box{
    background: #fff;
    padding: 15px 24px 123px;
    max-height: 100%;
    overflow-y: scroll;
    position:relative;
    .filter-pop-box-input{
        width: 100%;
        padding: 0 12px;
        box-sizing: border-box;
        height: 32px;
        line-height: 30px;
        background: #FFFFFF;
        border-radius: 16px;
        border: 1px solid #E4E4E4;
        font-size: 12px;
        font-family: Roboto-Regular;
        font-weight: 400;
        color: #999999;
    }
    .filter-pop-box-option{
        height: 12px;
        display: flex;
        line-height: 12px;
        span{
            display: inline-block;
            padding-left: 17px;
            margin-right: 30px;
            height: 12px;
            line-height: 12px;
            font-size: 12px;
            font-family: Roboto-Regular;
            font-weight: 400;
            color: #666666;
            background: url(../images/product/mobile/radio@3x.png) no-repeat left center/12px auto;
            &.hov{
                color: #121212;
                background: url(../images/product/mobile/radio_filt@3x.png) no-repeat left center/12px auto;
            }
        }
    }
    .filter-pop-box-con{
        h5{
            margin-top: 16px;
            height: 24px;
            font-size: 24px;
            font-family: Roboto-Medium;
            font-weight: 500;
            color: #000000;
            line-height: 24px;
        }
        .filter-pop-checkbox-list{
            li{
                line-height: 44px;
                box-sizing: border-box;
                position: relative;
                p{
                    display: inline-block;
                    font-size: 16px;
                    font-family: Roboto-Regular;
                    font-weight: 400;
                    color: #333333;
                    margin-left: 14px;
                    &:first-child{
                        margin: 0;
                    }
                    span{
                        margin-left: 14px;
                        color: #999999;
                    }
                    input{
                        visibility:hidden;
                    }
                    label{
                        font-size: 14px;
                        font-family: Roboto-Regular;
                        font-weight: 400;
                        color: #333333;
                        cursor:pointer;
                        position:absolute;
                        width:14px;
                        height:14px;
                        top:15px;
                        left:0;
                        background:#fff;
                        border:1px solid #DCDCDC;
                        &::after{
                            opacity:0;
                            content:'';
                            position:absolute;
                            width:14px;
                            height:14px;
                            top:-1px;
                            left:-1px;
                            background: url(../images/foryou/Sidebar_Checkbox_Selected@2x.png) no-repeat center center/14px auto;
                           
                        }
                    }
                }
            }
        }
        .filter-pop-checkbox-list li input[type=checkbox]:checked + label {
            background:#fff;
            border:1px solid #fff;
        }
        .filter-pop-checkbox-list input[type=checkbox]:checked + label:after {
            opacity:1;
        }
    }
    .filter-pop-box-submit{
        height: 62px;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 2000;
        background: #fff;
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 0 24px;
        align-items: center;
        border-top: 1px solid #E4E4E4;
        span{
            display: inline-block;
            width: 152px;
            height: 32px;
            border-radius: 16px;
            border: 1px solid #177FE9;
            text-align: center;
            line-height: 30px;
            box-sizing: border-box;
            font-size: 14px;
            font-family: Roboto-Regular;
            font-weight: 400;
            color: #177FE9;
            &.apply-pop{
                background: #177FE9;
                color:#fff;
            }
        }
    }
}
.business-logo-moblie{
    padding: 15px 0 30px;
    .business-logo{
        width: 100%;
        display: flex;
        height: 80px;
        align-items: center;
        font-size: 16px;
        font-family: Roboto-Bold;
        font-weight: bold;
        color: #333333;
        letter-spacing: 0.4px;
        img{
            display: block;
            width: 80px;
            height: 80px;
            margin-right: 12px;
        }
    }  
    .business-about{
        margin-top: 8px;
        .business-about-box{
            &.p-ellipsis{
                .details{
                    max-height: 168px;
                    overflow: hidden;
                    font-size: 14px;
                    font-family: Roboto-Regular;
                    font-weight: 400;
                    color: #333333;
                    line-height: 24px;
                    margin-top: 3px;
                }
                .view-more{
                    margin-top: -40px;
                    i{
                        display:inline-block;
                        width:10px;
                        height:5.8px;
                        background-image: url("../images/index/down@2x.png");
                        background-size:10px 5.8px;
                        margin-left:8px;
                    }
                }
            }
            .details{
                font-size: 14px;
                font-family: Roboto-Regular;
                font-weight: 400;
                color: #333333;
                line-height: 24px;
            }
            .view-more{
                font-family: Roboto-Medium;
                display: block;
                color: #177FE9;
                letter-spacing: 0.5px;
                text-align: center;
                background-image: linear-gradient(180deg, rgba(255,255,255,0.00) 0%, #FFFFFF 23%, #FFFFFF 59%, #FFFFFF 100%);
                height: 40px;
                line-height: 40px;
                text-align: center;
                background-size: 810px 40px;
                position: relative;
                font-size: 14px;
                font-family: Roboto-Medium;
                &.down{
                    i{
                        display:inline-block;
                        width:10px;
                        height:5.8px;
                        background-image: url("../images/index/up@2x.png");
                        background-size:10px 5.8px;
                        margin-left:8px;
                        vertical-align:middle;
                    }
                }
            }
        }   
    }
}
